<template>
    <div id="industryList" class="industryList">
        <header class="header">
            <i class="iconfont icon-zuojiantou" @click="$router.back(-1)"></i>
            <input type="search" placeholder="输入行业、技能等关键词" />
            <i class="iconfont icon-search"></i>
        </header>
        <ul class="menuTab">
            <li class="menu_list active" style="flex:1.6" @click="menuTabfn($event)">
                <div class="menu_line">
                    <span>行业 | 技能</span>
                    <i class="iconfont msnui-down-arrow-round"></i>
                </div>
            </li>
            <li class="menu_list" @click="menuTabfn($event)">
                <div class="menu_line">
                    <span>城市</span>
                    <i class="iconfont msnui-down-arrow-round"></i>
                </div>
            </li>
            <li class="menu_list menu_time" @click="menuTabfn($event)">
                <div class="menu_line">
                    <span>时间</span>
                    <i class="iconfont msnui-down-arrow-round"></i>
                </div>
                <div class="menuTab_list menuTab_time_list">
                    <ul>
                        <li>全部</li>
                        <li>按发布日期</li>
                        <li>按截止日期</li>
                    </ul>
                </div>
            </li>
            <li class="menu_list menu_state" style="flex:1.4" @click="menuTabfn($event)">
                <div class="menu_line">
                    <span>项目状态</span>
                    <i class="iconfont msnui-down-arrow-round"></i>
                </div>
                <div class="menuTab_list menuTab_state_list">
                    <ul>
                        <li>全部</li>
                        <li>顾问寻找中</li>
                        <li>顾问已确定</li>
                    </ul>
                </div>
            </li>
        </ul>
        <div class="freelancer_list">
            <h1 class="title">
                <strong>这里是一个项目标题</strong>
                <span>顾问寻找中</span>
            </h1>
            <p class="salary">¥2600元</p>
            <div class="detailed">
                <span>XX类型顾问<em>|</em>6个月<em>|</em>上海</span>
                <span>59人浏览</span>
            </div>
            <dl class="company">
                <dt><img src="../assets/images/login_bg.jpg" /></dt>
                <dd>
                    <h2>杭州剑齿虎信息技术有限公司</h2>
                    <p>互联网／大数据</p>
                </dd>
            </dl>
        </div>
        <div class="mask"></div>
    </div>
</template>

<script>
export default {
    name: 'industryList',
    created() {
        
    },
    mounted() {  
    },
    methods: {
        menuTabfn(event) {
            var el = event.currentTarget;
            $(el).addClass('active').find('.menuTab_list').slideDown(200).end().siblings('li').removeClass('active').find('.menuTab_list').slideUp(0);
            //$(el).find('.menuTab_list').slideDown(200);
            $('.mask').show();
        }
    }
}
</script>

<style lang="scss" scoped>
.industryList {
    padding-top: 2.586667rem;
    .header {
        position: fixed;
        text-align: left;
        z-index: 2;
        input {
            border: 0;
            background: #FFFFFF;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50);
            border-radius: 2px;  
            color: #414568;  
            font-size: .373333rem;
            padding: .16rem 1.2rem;
            height: .853333rem;
            line-height: .533333rem;
            width: 80%;
            margin-left: 15%;
        }
        i.icon-search {
            position: absolute;
            left: 18%;
            top: 0;
            color: #414568;
        }
    }
}
.menuTab {
    position: fixed;
    z-index: 2;
    width: 100%;
    top: 1.333333rem;
    display: flex;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10);
    .menu_list {
        height: 1.44rem;
        line-height: .853333rem;
        padding: .293333rem 0;
        flex: 1;       
        font-size: .426667rem;        
        position: relative;
        .menu_line {
            border-right: 1px solid #EDEDED;
            width: 100%;
            display: flex;
            justify-content: center;
            text-align: center;
        }
        span {
            margin-right: 5px;
        }
        i {
            color: #757575;
            font-size: 20px !important;
            
        }
        &:nth-last-of-type(1) {
            .menu_line {
                border-right: 0;
            }   
        }
        &.active {
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10);
            flex: inherit;       
            .menu_line {
                border-right: 0;
            }
            i {
                transform: rotate(180deg);
            }
        }
        &.menu_time.active {
            width: 2.666667rem;
        }
        &.menu_state.active {
            width: 3.2rem;
        }
    }
}
.freelancer_list {
    background: #fff;
    margin: 0 0 .266667rem;
    padding: .266667rem .533333rem;
    .title {
        color: #212121;
        line-height: .72rem;
        display: flex;
        justify-content: space-between;
        strong {
            font-size: .48rem;
            font-weight: normal;
        }
        span {
            color: #507390;
        }
    }
    .salary {
        font-size: .48rem;
        color: #D0021B;
        line-height: .64rem;
        margin: .133333rem 0;
    }
    .detailed {
        color: #757575;
        line-height: .64rem;
        display: flex;
        justify-content: space-between;
        em {
            padding: 0 10px;
        }
    }
    .company {
        border-top: 1px solid #EDEEF0;
        margin-top: .266667rem;
        padding-top: .266667rem;
        display: flex;
        dt {
            padding: 0 .4rem;
            img{
                border: 1px solid #EDEEF0;
                border-radius: 100%;
                width: 1.066667rem;
                height: 1.066667rem;
            }
        }
        dd {
            h2 {
                font-size: .48rem;
                line-height: .64rem;
                color: #212121;
                font-weight: normal;
                margin: 0 0 .13rem;
            }
            p {
                color: #757575;
                line-height: .48rem;
            }
        }
        
    }
    &:nth-last-of-type(1) {
        margin-bottom: 0;
    }
}
.menuTab_list {
    display: none;
    position: absolute;
    left: 0;
    top: 1.44rem;
    padding-bottom: .266667rem;
}
.menuTab_time_list, .menuTab_state_list {
    background: #fff;
    line-height: .853333rem;
    white-space: nowrap;
    font-size: .426667rem;
    width: 100%;
    li {
        padding: 0 .266667rem;
        &:hover,
        &:visited {
            background: #eee;
            color: #507390;
        }

    }
}
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    display: none;
}
</style>
